<template>
  <view class="page">
    <view class="search-item">
      <u-search
        class="my-10"
        placeholder="请输入院校名称"
        :show-action="true"
        v-model="name"
        @search="customSearch"
        @custom="customSearch"
        @clear="customSearch"
      ></u-search>
    </view>

    <view>
      <template v-for="(item, i) in navList" :key="i">
        <view class="content" @click="toStart(item)">
          <view class="item01">
            <view class="word"> {{ item.name }}</view>
            <view class="flex text-24 line-24" v-if="item.area">
              <u-icon name="map-fill" color="#666" size="12"></u-icon>
              <text class="ml-4">{{ filterArea(item.area) }}</text>
            </view>
          </view>
          <view class="item2">
            <view class="flex flex-wrap">
              <view class="word-item" v-if="item.competentDepartmentName">
                {{ item.competentDepartmentName }}</view
              >
              <text
                class="word-item"
                v-for="(item1, index) in 0 || item.schoolLevelNames"
                :key="index"
                >{{ item1 }}
              </text>
            </view>
            <view class="end1">
              <view>招生数 {{ item.planNum }}</view>
              <view class="ml-20">专业数 {{ item.specialtyIds.length }}</view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <view class="page-btn" v-if="0">
      <view class="btn" @click="">快闪</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // navList:[
      // 	{name:'未学习',num:0,type:4,position:0,data:[],offset:0},
      // 	{name:'错词',num:0,type:5,position:0,data:[],offset:0},
      // 	{name:'已掌握',num:0,type:3,position:0,data:[],offset:0},
      // ],
      navList: [],
      curNav: 0,
      name: "",
      wordData: "",
      specialtyId: "",
      size: 20,
      current: 1,
      total: 0,
    };
  },
  onLoad(options) {
    this.current = 1;
    this.specialtyId = options.specialtyId || "";
    if (options.specialtyName) {
      uni.setNavigationBarTitle({
        title: options.specialtyName + "-院校",
      });
    }
    this.getList();
  },
  onShow() {},
  onReachBottom() {
    if (this.navList.length < this.total) {
      this.current += 1;
      this.getList(false);
    }
  },
  methods: {
    changeNav(i) {
      this.curNav = i;
    },
    toStart(item) {
			// 专业详情
      if (this.specialtyId) {
        uni.navigateTo({
          url:
            "/pages/special/schoolSpecial" +
            "?schoolCode=" +
            item.schoolCode +
            "&specialtyId=" +
            this.specialtyId,
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/special/schoolDetail?id=" +
            item.id +
            "&schoolCode=" +
            item.schoolCode,
        });
      }
    },

    customSearch(e) {
      // console.log("customSearch", e);
      this.getList(e);
    },
    filterArea(e) {
      // console.log("e=", e);
      if (e) {
        // '湖南省怀化市鹤城区'.match(/.+省/,'')
        return e.replace(/.+省/, "");
      }
      return e;
    },
    getList(isInit = true) {
      if (isInit) {
        this.current = 1;
      }
      this.$http
        .get1("/client/undergraduate/schoolList", {
          current: this.current,
          size: this.size,
          name: this.name,
          specialtyId: this.specialtyId,
          examType: 12,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.total = res.data.total;
            if (this.current == 1) {
              this.navList = res.data.records;
            } else {
              this.navList.push(...res.data.records);
            }
          }
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f2f3f8;
}

.page {
  padding: 30rpx 30rpx 200rpx;
  box-sizing: border-box;
}

.search-item {
  width: 100%;
  min-height: 120rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 20rpx 40rpx;

  ::v-deep .u-search {
    .u-search__action {
      font-size: 26rpx;
      color: #000;
    }
  }
}

.content {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 10rpx 40rpx;
  font-size: 24rpx;

  .item01 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .word {
      font-size: 28rpx;
      font-weight: bold;
      white-space: nowrap;
      color: #333333;
    }
    .line-24 {
      line-height: 24rpx;
    }
  }

  .item2 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .word {
      white-space: nowrap;
      color: #333333;
    }

    .word-item {
      background-color: #5480f8;
      border-radius: 10rpx;
      margin-right: 12rpx;
      font-size: 22rpx;
      font-weight: 400;
      padding: 4rpx 10rpx;
      margin-top: 10rpx;
      color: #fff;
      border: 1rpx solid #ccc;
    }

    .end1 {
      display: flex;
      justify-content: flex-end;
      font-size: 22rpx;
      white-space: nowrap;
    }
  }

  .item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 80rpx;

    .word {
      flex: 2;
      // width: 330rpx;
      font-size: 28rpx;
      font-weight: bold;
      white-space: nowrap;
      color: #333333;

      .word-item {
        background-color: #5480f8;
        border-radius: 10rpx;
        margin-right: 12rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        margin-top: 10rpx;
      }
    }

    .mean {
      flex: 1;
      // width: 100rpx;
      margin-left: 10rpx;
      white-space: nowrap;
      font-size: 24rpx;
      color: #575a64;
      // border: 1rpx solid;
    }

    .right {
      flex: 1;
      // width: 100rpx;
      margin-left: 6rpx;
      white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      font-size: 24rpx;
      color: #575a64;
    }
  }

  .end1 {
    display: flex;
    justify-content: flex-end;
    font-size: 22rpx;
  }
}

.page-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 176rpx;
  padding: 30rpx 62rpx;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 10;

  .btn {
    width: 100%;
    height: 90rpx;
    background: #5480f8;
    border-radius: 46rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;

    &.disable {
      background-color: #cad8fc;
    }
  }
}
</style>
